<template>
  <header id="header">
    <nut-row>
      <nut-col :span="8" align="center">
        <nut-button class="city" color="#e54847" icon="location2" shape="square" type="primary" @click="handleToCity">
          {{ $store.state.city.name }}
        </nut-button>
      </nut-col>
      <nut-col :span="8" align="center">
        <nut-button class="search" color="#e86f6e" icon="search" type="warning" @click="handleToSearch">搜索</nut-button>
      </nut-col>
      <nut-col :span="8" align="right">
        <nut-icon class="head" name="horizontal-n" @click="handleToRight"></nut-icon>
      </nut-col>
    </nut-row>
    <slot></slot>
    <nut-popup
        position="right"
        v-model:visible="showRight"
        :style="{ height: '100%', width: '30%' }"
    ></nut-popup>
    <nut-popup v-model:visible="show" :style="{ height: '100%' }" close-icon-position="top-left" closeable
               position="bottom">
      <div class="city_body">
        <nut-elevator :index-list="cityList" :style="{ marginTop: '46px', }" height="100%" @click-item="clickItem"
                      @click-index="clickIndex">
        </nut-elevator>
      </div>
    </nut-popup>
    <nut-popup v-model:visible="showSearch" :style="{ height: '100%' }" close-icon-position="top-left" closeable
               position="bottom">
      <div class="search_body">
        <div class="search_input">
          <div class="search_input_wrapper">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" v-model="message" placeholder="搜索">
          </div>
        </div>
        <div class="search_result">
          <h3>电影/电视剧/综艺</h3>
          <ul>
            <li v-for="item in moviesList" :key="item.id">
              <div class="img"><img :src="proxy.$setHW(item.img)"></div>
              <div class="info">
                <p><span>{{ item.nm }}</span><span>{{ item.sc }}</span></p>
                <p>{{ item.enm }}</p>
                <p>{{ item.cat }}</p>
                <p>{{ item.rt }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--      <Search/>-->
    </nut-popup>
  </header>
</template>

<script>

import {reactive, toRefs, getCurrentInstance, onMounted} from "vue";

export default {
  name: "HeaderPlus",
  setup() {
    const state = reactive({});
    let {proxy} = getCurrentInstance();//暴露实例==>this

    onMounted(() => {
      const cityList = window.localStorage.getItem('cityList');
      const hotList = window.localStorage.getItem('hotList');
      if (cityList && hotList) {
        proxy.cityList = JSON.parse(cityList);
        proxy.hotList = JSON.parse(hotList);
      } else {
        proxy.$axios.get('/api/cityList').then((res) => {
          const msg = res.data.msg;
          if (msg === '成功') {
            const cities = res.data.data;
            const {cityList, hotList} = proxy.formatCityList(cities);
            console.log(cityList, hotList)
            proxy.cityList = cityList;
            proxy.hotList = hotList;
            window.localStorage.setItem('cityList', JSON.stringify(cityList));
            window.localStorage.setItem('hotList', JSON.stringify(hotList));
          }
        })
      }
    });

    const clickItem = (key, item) => {
      const name = item.name;
      const id = item.id;
      proxy.$store.commit('city/CITY_INFO', {name, id});
      window.localStorage.setItem('nowNm', item.name);
      window.localStorage.setItem('nowId', item.id);
      // window.location.reload();
      proxy.$router.go(0)
      proxy.show = false;
      console.log(key, JSON.stringify(item.name));
    };
    const clickIndex = (key) => {
      console.log(key);
    };
    return {
      state, proxy,
      ...toRefs(state), clickItem, clickIndex
    };
  },
  data() {
    return {
      show: false,
      showSearch: false,
      showRight:false,
      cityList: [],
      hotList: [],
      message: "",
      moviesList: [],
      cinemasList: [],
    };
  },
  computed: {},
  components: {},
  watch: {
    message(newVal) {
      var cityId = this.$store.state.city.id
      var that = this;
      this.cancelRequest();
      this.$axios.get('/api/searchList?cityid=' + cityId + '&kw=' + newVal, {
        cancelToken: new this.$axios.CancelToken(function (c) {
          that.source = c;
        })
      }).then((res) => {
        var msg = res.data.msg;
        var movies = res.data.data.movies;
        var cinemas = res.data.data.cinemas;
        if (movies && msg) {
          this.moviesList = movies;
          this.cinemasList = cinemas;
        }
      }).catch((err) => {
        if (this.$axios.isCancel(err)) {
          // console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message
        } else {
          //handle error
          // console.log(err);
        }
      })

    }
  },
  methods: {
    cancelRequest() {
      if (typeof this.source === 'function') {
        this.source('终止请求')
      }
    },
    handleToCity() {
      this.show = true;
    },
    handleToSearch() {
      this.showSearch = true;
    },
    handleToRight(){
      this.showRight = true;
    },
    /**
     * 重新格式化城市列表
     * @param cities
     * @returns {{hotList: *[], cityList: *[]}}
     */
    formatCityList(cities) {
      const cityList = [];
      const hotList = [];
      for (var k = 0; k < cities.length; k++) {
        if (cities[k].ishot === 1) {
          hotList.push(cities[k]);
        }
      }
      for (let i = 0; i < cities.length; i++) {
        const firstLetter = cities[i].py.substring(0, 1).toUpperCase();
        if (toCom(firstLetter)) {//新添加的索引
          cityList.push({title: firstLetter, list: [{name: cities[i].nm, id: cities[i].id}]});
        } else {//已有的索引
          for (let j = 0; j < cityList.length; j++) {
            if (cityList[j].title === firstLetter) {
              cityList[j].list.push({name: cities[i].nm, id: cities[i].id});
            }
          }
        }
      }
      /**
       * 原生数组排序
       */
      cityList.sort((n1, n2) => {
        if (n1.title > n2.title) {
          return 1;
        } else if (n1.title < n2.title) {
          return -1;
        } else {
          return 0;
        }
      })

      /**
       * 循环大写字母进行添加
       * @param firstLetter
       * @returns {boolean}
       */
      function toCom(firstLetter) {
        for (let i = 0; i < cityList.length; i++) {
          if (cityList[i].title === firstLetter) {
            return false;
          }
        }
        return true;
      }

      return {
        cityList, hotList
      }
      // console.log(hotList)
    },
  }
}
</script>

<style scoped>
.nut-button >>> .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


#header {
  width: 100%;
  height: 50px;
  color: #fff;
  background: #e54847;
  border-bottom: 1px solid #e54847;
  position: relative;
}

#header h1 {
  font-size: 18px;
  text-align: center;
  line-height: 50px;
  font-weight: normal;
}


.city, .search {
  width: 100%;
  height: 30px;
  top: 10px;
}

.head {
  height: 30px;
  top: 10px;
  right: 10px;
}

.city_body {
  margin-top: 6px;
  display: flex;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.city_body .city_list {
  flex: 1;
  overflow: auto;
  background: #FFF5F0;
}

.city_body .city_list::-webkit-scrollbar {
  background-color: transparent;
  width: 0;
}

.city_body .city_hot {
  margin-top: 20px;
}

.city_body .city_hot h2 {
  padding-left: 15px;
  line-height: 30px;
  font-size: 14px;
  background: #F0F0F0;
  font-weight: normal;
}

.city_body .city_hot ul {
}

.city_body .city_hot ul li {
  float: left;
  background: #fff;
  width: 29%;
  height: 33px;
  margin-top: 15px;
  margin-left: 3%;
  padding: 0 4px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  line-height: 33px;
  text-align: center;
  box-sizing: border-box;
}

.city_body .city_sort {
}

.city_body .city_sort div {
  margin-top: 20px;
}

.city_body .city_sort h2 {
  padding-left: 15px;
  line-height: 30px;
  font-size: 14px;
  background: #F0F0F0;
  font-weight: normal;
}

.city_body .city_sort ul {
  padding-left: 10px;
  margin-top: 10px;
}

.city_body .city_sort ul li {
  line-height: 30px;
  line-height: 30px;
}

.city_body .city_index {
  width: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-left: 1px #e6e6e6 solid;
}

/**
 *search style
 */
.search_body {
  flex: 1;
  overflow: auto;
  margin-top: 51px;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.search_body .search_input {
  padding: 8px 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
}

.search_body .search_input_wrapper {
  padding: 0 10px;
  border: 1px solid #e6e6e6;
  border-radius: 25px;
  background-color: #fff;
  display: flex;
  line-height: 20px;
}

.search_body .search_input_wrapper i {
  font-size: 16px;
  padding: 4px 0;
}

.search_body .search_input_wrapper input {
  border: none;
  font-size: 13px;
  color: #333;
  padding: 4px 0;
  outline: none;
  margin-left: 5px;
  width: 100%;
  height: 23px;

}

.search_body .search_result {
}

.search_body .search_result h3 {
  font-size: 15px;
  color: #999;
  padding: 9px 15px;
  border-bottom: 1px solid #e6e6e6;
}

.search_body .search_result ul {
}

.search_body .search_result li {
  border-bottom: 1px #c9c9c9 dashed;
  padding: 10px 15px;
  box-sizing: border-box;
  display: flex;
}

.search_body .search_result .img {
  width: 60px;
  float: left;
}

.search_body .search_result .img img {
  width: 100%;
}

.search_body .search_result .info {
  float: left;
  margin-left: 15px;
  flex: 1;
}

.search_body .search_result .info p {
  height: 22px;
  display: flex;
  line-height: 22px;
  font-size: 12px;
}

.search_body .search_result .info p:nth-of-type(1) span:nth-of-type(1) {
  font-size: 18px;
  flex: 1;
}

.search_body .search_result .info p:nth-of-type(1) span:nth-of-type(2) {
  font-size: 16px;
  color: #fc7103;
}
</style>